<template>
	<view class="character-detail">
		<view class="hearder">
			<view class="title">
				{{formData.title || ''}}
			</view>
			<view class="timer" style="margin-right: 30rpx;">
				{{timeDifference($u.timeFormat(new Date(formData.createDate),'yyyy-mm-dd hh:MM:ss'))}}
			</view>
			<view class="center-content">
			</view>
		</view>
		<u-parse :html="formData.content"></u-parse>
	</view>
</template>
<script>
	import {
		timeDifference
	} from "@/utils/formaterTime.js"
	import {
		queryPortalNewsById
	} from '@/common/api/auth.js'
	import {
		getToken
	} from '@/utils/token.js'
	// #ifdef MP-WEIXIN
	import {
		shareMixins
	} from "@/mixins/share.js"
	// #endif
	export default {
		// #ifdef MP-WEIXIN
		mixins: [shareMixins],
		// #endif
		data() {
			return {
				shareData: {
					title: '名片王'
				},
				formData: {}
			};
		},
		onShow(){
		},
		onLoad(options) {
			this.queryPortalNewsById(options.id)
		},
		methods: {
			timeDifference,
			queryPortalNewsById(id) {
				if (!id) {
					return
				}
				queryPortalNewsById({
					companyNo: getToken('useNum'),
					newsId: id
				}).then(res => {
					if (res.statusCode == 200) {
						this.formData = res.data
						//分享
						this.shareData.title=this.formData && this.formData.title || '新闻标题' //分享标题
						this.shareData.imgUrl='https://job.ydylmold.cn/mingpian/image/mingpian.jpg'//分享图片
						this.shareData.desc = this.formData && this.formData.strContent || '行业新闻' //描述
						//#ifdef H5
						this.shareData.path = `https://job.ydylmold.cn/mingpian/index.html#/pages/indexSub/newDetail?id=${this.formData.newsId}`
						onShareData(this.shareData)
						//#endif
						// #ifdef MP-WEIXIN
							this.shareData.path = `/pages/indexSub/newDetail?id=${this.formData.newsId}`
						// #endif
						this.$store.commit('setShareData',this.shareData)
					}
				})
			}
		},
	}
</script>
<style lang="scss" scoped>
	.character-detail {
		width: 100vw;
		padding: 30rpx;

		.hearder {
			.title {
				font-size: 35rpx;
				font-weight: bold;
				text-align: center;
			}

			.timer {
				text-align: right;
				font-size: 26rpx;
				color: #808080;
				margin: 30rpx 0;
			}

			.center-content {
				line-height: 50rpx;
				text-indent: 48rpx; //首行缩进2
			}
		}

		.box {
			height: 100rpx;
		}

		.post-input {
			background-color: #fff;
			width: 100vw;
			height: 100rpx;
			position: fixed;
			bottom: 0;
			left: 0;
			border-top: 2rpx solid #f3f4f6;

			.content {
				width: 100vw;
				height: 100%;
				// padding: 0 20rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;

				.input {
					width: 65%;
				}

				.icon {
					flex: 1;
					display: flex;
					justify-content: space-around;
				}
			}
		}
	}

	.user_info {
		padding: 30rpx;
		display: flex;
		align-items: center;
		position: relative;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			background-color: gray;
			border-radius: 50%;
			overflow: hidden;

			image {
				height: 100%;
				width: 100%;
			}

			align-self: flex-start;
		}

		.msg {
			flex: 1;
			margin-left: 30rpx;
			color: #4D4D4D;
			font-size: 24rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.hearder {
				width: 100%;
				border: none;
				display: flex;
				justify-content: space-between;

				.right {
					display: flex;
					justify-content: center;
					align-items: center;

					.btn {
						padding: 5rpx 30rpx;
						color: #FFFFFF;
						display: inline-block;
						background-color: #0080FF;
						border-radius: 40rpx;
						font-size: 26rpx;
					}
				}
			}
		}
	}

	.activeReply {
		padding: 5rpx 15rpx;
		color: #FFFFFF;
		display: inline-block;
		background-color: #A8A8A8;
		border-radius: 40rpx;
		font-size: 26rpx;
	}

	.replybtn {
		padding: 5rpx 15rpx !important;
		color: #FFFFFF;
		display: inline-block;
		background-color: #0080FF !important;
		border-radius: 40rpx;
		font-size: 26rpx;
	}
</style>
